<!-- 
 项目 编辑 抽屉组件
  -->
<template>
  <el-drawer v-model="dialog" :title="title" :before-close="handleClose" direction="rtl" class="demo-drawer">
    <div class="demo-drawer__content">
      <el-timeline v-if="list.length" style="max-width: 600px">
        <el-timeline-item v-for="item in list" :timestamp="item.createTime" placement="top">
          <el-card class="card">
            <h4 class="create">{{ item.createBy }}</h4>
            <div class="remark">{{ item.remark }}</div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-empty v-else :image-size="200" />
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElDrawer } from 'element-plus'
import http from '../../http'

const emit = defineEmits(['closeDrawer'])

const title = ref('')
const dialog = ref(false)
const loading = ref(false)

const list = ref<any[]>([])

const form = reactive({
  id: -1,
  remark: '',
})
const openDrawer = async (id: number, cname: string) => {
  list.value = []
  title.value = cname
  form.id = id
  dialog.value = true
  const { rows } = await http({
    method: 'GET',
    path: '/dev-api/oa/remark/listall',
    params: {
      projectId: form.id,
    },
  })
  list.value = rows
  console.log(rows)
}

defineExpose({
  openDrawer,
})

const handleClose = () => {
  if (loading.value) {
    return
  }
  dialog.value = false
  emit('closeDrawer')
}

</script>
<style lang="scss" scoped>
.drawer-footer {
  text-align: right;
}
.demo-drawer__content {
  text-align: left;
  .card {
    padding: 0;
    .create {
      font-size: 16px;
    }
    .remark {
      white-space: pre-line;
    }
  }
}
</style>
